<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // localStorage: 存储的信息不会随着标签页关闭 或 浏览器关闭而丢失
      // sessionStorage: 存储的信息会随着标签页关闭 或 浏览器关闭而丢失

      if (typeof Storage === "undefined") {
        alert("不支持 Web Storage");
      } else {
        // 存储数据
        localStorage.setItem("name", "张三");
        localStorage.setItem("age", 18);

        // 获取数据
        console.log(localStorage.getItem("name"));
        console.log(localStorage.getItem("age"));

        // 删除数据
        // localStorage.removeItem("name");

        // 清空数据
        // localStorage.clear();

        // 存储数据
        sessionStorage.setItem("name", "李四");
        sessionStorage.setItem("age", 19);

        // 获取数据
        console.log(sessionStorage.getItem("name"));
        console.log(sessionStorage.getItem("age"));

        // 删除数据
        // sessionStorage.removeItem("name");

        // 清空数据
        // sessionStorage.clear();
      }
    </script>
  </body>
</html>
